<template>
  <el-dialog :title="title" :visible.sync="vio_Dialogvisible" width="50%" @close="videoDialogClose">
    <video controls="controls" autoplay="autoplay" :src="video_src"></video>
  </el-dialog>
</template>

<script>
import data_list from './data.json'
export default {
  data () {
    return {
      vio_Dialogvisible: false,
      data_list: [],
      video_data: [],
      title: '',
      video_src: ''
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      default: 0
    }
  },
  watch: {
    visible (val, oldval) {
      this.vio_Dialogvisible = val
    },
    index (val, oldval) {
      this.getdata(val)
    }
  },
  mounted () {
    this.data_list = data_list.data
  },
  methods: {
    videoDialogClose () {
      this.$emit('update:visible', false)
    },
    getdata (val) {
      this.video_data = this.data_list.filter((item, index) => {
        return val === index
      })
      this.title = this.video_data[0].title
      this.video_src = this.video_data[0].video
    }
  }
}
</script>
<style scoped="scoped" lang="less">
video{
  width: 100%;
  max-height: 600px;
}
</style>
